<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <bar-chart></bar-chart>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="4" :offset="2">
        <img src="/marker_red.png" />关键站址
      </el-col>
      <el-col :span="4">
        <img src="/marker_yellow.png" />普通站址
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>退服点位图{{ this.e1version }}</span>
          </div>
          <div>
            <map-chart
              showtool="n"
              zoom="8"
              mapid="map_container1"
              ref="map_container1"
              height="500px"
              :option="{
                datatype: ['commonExit', 'importantExit'],
                showheat: 'n',
                showmarker: 'y',
                home: 'y',
              }"
              @toversion="getChildExit1Version"
            ></map-chart>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>退服热力图{{ this.e2version }}</span>
          </div>
          <div>
            <map-chart
              showtool="n"
              zoom="8"
              mapid="map_container2"
              ref="map_container2"
              height="500px"
              :option="{
                datatype: ['commonExit', 'importantExit'],
                showheat: 'y',
                showmarker: 'y',
                hometool: 'y',
                home: 'y',
              }"
              @toversion="getChildExit2Version"
            ></map-chart>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>停电点位图{{ this.s1version }}</span>
          </div>
          <div>
            <map-chart
              showtool="n"
              zoom="8"
              mapid="map_container3"
              ref="map_container3"
              height="500px"
              :option="{
                datatype: ['commonStop', 'importantStop'],
                showheat: 'n',
                showmarker: 'y',
                home: 'y',
              }"
              @toversion="getChildStop1Version"
            ></map-chart>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>停电热力图{{ this.s2version }}</span>
          </div>
          <div>
            <map-chart
              showtool="n"
              zoom="8"
              mapid="map_container4"
              ref="map_container4"
              height="500px"
              :option="{
                datatype: ['commonStop', 'importantStop'],
                showheat: 'y',
                showmarker: 'y',
                hometool: 'y',
                home: 'y',
              }"
              @toversion="getChildStop2Version"
            ></map-chart>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MapChart from "./chart/mapchart/index";
import BarChart from "./chart/barchart/index";

var _this = this;

export default {
  name: "Index",
  components: {
    MapChart,
    BarChart,
  },
  data() {
    return {
      s1version: "",
      e1version: "",
      s2version: "",
      e2version: "",
    };
  },
  beforeCreate() {
    _this = this;
  },
  mounted() {
    // setTimeout(() => {
    //   for (let i = 0; i < 8; i++) {
    //     let m = _this.$refs["map_container" + i];
    //     m.map.setZoom(7);
    //   }
    // }, 20000);
  },
  methods: {
    getChildExit1Version(v) {
      this.e1version = v;
    },
    getChildStop1Version(v) {
      this.s1version = v;
    },
    getChildExit2Version(v) {
      this.e2version = v;
    },
    getChildStop2Version(v) {
      this.s2version = v;
    },
  },
};
</script>
<style scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
